<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">

    <div class="layui-form-item">
        <label class="layui-form-label required">菜品名</label>
        <div class="layui-input-block">
            <input type="text" name="vname" lay-verify="required" lay-reqtext="菜品名不能为空" placeholder="请输入菜品名" value="" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">是否上架</label>
        <div class="layui-input-block">
            <input type="radio" name="vPutStatus" value="1" title="上架" checked="">
            <input type="radio" name="vPutStatus" value="0" title="下架">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">是否支持外送</label>
        <div class="layui-input-block">
            <input type="radio" name="vGoStatus" value="1" title="支持" checked="">
            <input type="radio" name="vGoStatus" value="0" title="不支持">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">价格</label>
        <div class="layui-input-block">
            <input type="text" maxlength="11" name="vprice" lay-verify="required" lay-reqtext="价格不能为空" placeholder="请输入价格" value="" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">出售数量</label>
        <div class="layui-input-block">
            <input type="number" maxlength="11" name="vsell" lay-verify="required" lay-reqtext="出售数量不能为空" placeholder="请输入出售数量" value="" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">菜品描述</label>
        <div class="layui-input-block">
            <textarea name="vdepict" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label" required="">菜品类型</label>
        <div class="layui-input-block">
            <select id="vType" name="vType" lay-verify="">
                <option value="">--选择类型--</option>
                <option value="1001">套餐</option>
                <option value="1002">汉堡</option>
                <option value="1003">小吃</option>
                <option value="1005">饮料</option>
                <option value="1006">甜品</option>
              </select>
        </div>
    </div>
    

    <div id="app">
        <div class="layui-card">
            <div class="layui-card-header" style="margin-left: 65px">
                <h2>菜品图片</h2>
            </div>
            <div class="layui-card-body">
                <div class="layui-upload" style="margin-left:65px;">
                    <img id="pic" src="../images/combo_02.webp" style="width:140px;height:90px" alt="">
                    <button type="button" class="layui-btn" id="browser-pic" style="margin-left:35px">
                        <i class="layui-icon">&#xe67c;</i>浏览图片
                    </button>

                </div>
            </div>
        </div>
    </div>

    
    <div class="layui-form-item">
            <button  style="margin-left: 100px;margin-top: 15px;"  id="btn_ok" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
    </div>
</div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload=layui.upload,
            $ = layui.$;

        var myfile;    
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            if(data.field.vType===""){
                layer.msg('菜品类型不能为空',{icon:5,time:1000,shift:6});
				return false;	  
            }
            

            // 创建一个 FormData 实例  
            var formData = new FormData();  
            
            formData.append('varietyName',data.field.vname);
            formData.append('varietyPrice',data.field.vprice);
            formData.append('varietyDepict',data.field.vdepict);
            formData.append('varietyTypeId',data.field.vType);
            formData.append('varietyPutStatus',data.field.vPutStatus);
            formData.append('varietyGoStatus',data.field.vGoStatus);
            formData.append('varietyFile',myfile);
            
            for (let pair of formData.entries()) {  
                let key = pair[0]; // 获取键  
                let value = pair[1]; // 获取值  
                console.log(key + ': ' + value);  
            }   
            $.ajax({
                type:"post",
                url:"http://localhost:8080/restaurant_web_war_exploded/variety/insertVariety",
                data:formData,
                processData: false, // 告诉 jQuery 不要去处理发送的数据 
                contentType: false, // 告诉 jQuery 不要去设置 Content-Type 请求头 
                success:function (res){
                    var index= layui.layer.load(3, {  
                    shade: [1,'#fff']  })//0.1透明度的白色背景 
                    console.log(res);
                    if(res.errorCode==200){
                        var indexifr = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引        
                        setTimeout(function(){
                        parent.layer.close(indexifr);
                        window.parent.postMessage('success', 'http://127.0.0.1:5500/index.html#/../html/varietyInfo.html'); // '*' 表示目标源，慎用，建议使用具体的源      
                        },1000)

                        setTimeout(function(){   
                        layer.close(index);      
                        // 更新元素          
                        },1200);    
                    }
                }
            })
        });
            
          //第三：使用组件
          let uploadInst = upload.render({
            // 绑定浏览文件元素
            elem: '#browser-pic',

            // 设置允许上传的文件类型
            accept: 'file',

            // 设置允许上传的文件后缀
            exts: 'jpg|png|jpeg|gif|webp',

            // 设计允许上传文件的大小，单位：KB
            size: 10 * 1024,
                
            // 设置不自动上传
            auto: false,

            error: function (error) {			//上传失败的回调

            },
            choose: function (obj) {		//选择文件后的回调
                obj.preview(function (index, file, result) {
                    myfile=file;
                    //显示图片
                    $("#pic").prop("src", result);
                });
            }
        });

    });
</script>
</body>
</html>